<template>
  <div class="show-box">
    <el-dialog
      title="视频"
      :visible.sync="videoOpen"
      width="1000px"
      append-to-body
      v-dialogDrag
    >
      <video id="videoid" controls style="width: 960px">
        <source :src="videoUrl" type="video/mp4" />
      </video>
    </el-dialog>
    <el-dialog
      title="文档"
      :visible.sync="docOpen"
      width="1000px"
      append-to-body
      v-dialogDrag
    >
      <previewExcel :previewUrl="previewUrl" :previewType="previewType"></previewExcel>
    </el-dialog>
    <div class="no-data" v-show="fileVedioList.length == 0">暂无数据</div>
    <ul
      class="message-list show-list"
      :style="{ display: videoOpen || docOpen ? 'none' : 'block' }"
    >
      <div style="max-height: 70vh; overflow-y: auto">
        <li
          class="list-item"
          v-for="item in fileVedioList"
          :key="item.id"
          @click="showType(item)"
        >
          <div class="left">
            <div class="text">{{ item.name }}</div>
            <div class="buttonms">查看</div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</template>
<script>
import previewExcel from "@/views/components/previewTemplete/excels.vue";
export default {
  name: "DocumentShow",
  components: { previewExcel },
  dicts: [],
  props: {
    fileVedioList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      videoUrl: undefined,
      previewUrl: undefined,
      previewType: undefined,
      videoOpen: false,
      docOpen: false,
    };
  },
  watch: {
    videoOpen(val) {
      if (!val) {
        this.stopVideo();
      }
    },
  },
  created() {
    // 这里根据菜单路径或id获取接口资源数据
    this.videoUrl = "http://vjs.zencdn.net/v/oceans.mp4";
    this.previewUrl =
      "http://192.168.0.103:8081/profile/upload/2024/02/22/test111_20240222135621A004.pdf";
  },
  methods: {
    showType(item) {
      this.previewType = item.path.substr(item.path.lastIndexOf(".") + 1);
      if (
        this.previewType == "doc" ||
        this.previewType == "docx" ||
        this.previewType == "pdf" ||
        this.previewType == "xlsx" ||
        this.previewType == "xls"
      ) {
        this.docOpen = true;
        this.previewUrl = item.path;
      } else if (this.previewType == "mp4") {
        this.videoOpen = true;
        this.videoUrl = item.path;
        let vide = document.getElementById("videoid");
        if (vide?.paused) {
          vide.play();
        }
      }
    },
    showVideo() {
      this.videoOpen = true;
      let vide = document.getElementById("videoid");
      if (vide?.paused) {
        vide.play();
      }
    },
    stopVideo() {
      let vide = document.getElementById("videoid");
      vide?.pause();
    },
    showDoc() {
      let path = this.previewUrl;
      this.previewType = path.substr(path.lastIndexOf(".") + 1);
      this.docOpen = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.buttonms {
  color: green;
  padding-right: 10px;
  margin-top: 4px;
  text-align: right;
}
.show-box {
  margin: 0 auto;
}
.message-list li {
  background: #ffffff;
  padding: 8px 5px;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 8px;
}
.no-data {
  text-align: center;
  padding: 4px 0;
}
</style>
